<template>
  <ul :class="comClazz">
    <li :class="comItemClazz" @click="goPrePage">
      <a>
        <LeftOutlined />
      </a>
    </li>
    <li
      v-for="(item, index) in pageItems"
      :key="index"
      :class="[
        ...comItemClazz,
        {
          'is-active': item.active,
        },
      ]"
      @click="handlePageItemClick(item)"
    >
      <a v-if="item.type === 'page'">{{ item.label }}</a>

      <a v-if="item.type === 'fastBackward' || item.type === 'fastForward'">
        <EllipsisOutlined />
      </a>
    </li>
    <li :class="comItemClazz" @click="goNextPage">
      <a> <RightOutlined /></a>
    </li>
  </ul>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import { getPageItems, PageItem } from "./utils";
import {
  EllipsisOutlined,
  LeftOutlined,
  RightOutlined,
} from "@ant-design/icons-vue";
export default defineComponent({
  name: "MPagination",
  components: {
    EllipsisOutlined,
    LeftOutlined,
    RightOutlined,
  },
  props: {
    // 当前页

    value: {
      type: Number,
      default: 1,
    },
    // 总条数
    total: {
      type: Number,
      default: 0,
    },
    // 一页几条
    limit: {
      type: Number,
    },
    // 分页选项
    pageSizeOptions: {
      type: [Array, Boolean],
      default: false,
    },
    // 页码显示的个数
    pageSlot: {
      type: Number,
      default: 7,
    },
    size: {
      type: String,
      default: "medium",
    },
    disabled: Boolean,
  },
  emits: ["change"],
  setup(props, { emit }) {
    // 这两个后面封装下
    const comClazz = computed(() =>
      [
        "m-pagination",
        props.size ? `m-pagination--${props.size}` : "",
        {
          "is-disabled": props.disabled, // 状态全部以 is-开头
        },
      ].filter(Boolean)
    );

    const comItemClazz = computed(() => {
      return [
        "m-pagination__item",
        props.size ? `m-pagination__item--${props.size}` : "",
        {
          "is-disabled": props.disabled, // 状态全部以 is-开头
        },
      ];
    });

    // 总页数  12 / 10 = 2
    const pageCount = computed(() => {
      if (props.total > 0) {
        return Math.max(1, Math.ceil(props.total / props.limit));
      } else {
        return 1;
      }
    });
    const comPageSizeOptions = computed(() => {
      if (!props.pageSizeOptions) {
        return [];
      }
      if (Array.isArray(props.pageSizeOptions)) {
        return props.pageSizeOptions;
      }
      return [10, 20, 30];
    });
    const comPreBtnDisabled = computed(() => {
      return props.value === 1 || props.disabled;
    });
    const comNextBtnDisabled = computed(
      () => props.disabled || props.value === pageCount.value
    );
    // 开始的下标  0开始
    const startIndex = computed(() => {
      return (props.value - 1) * props.limit;
    });
    // 结束的下表
    const endIndexRef = computed(() => {
      const endIndex = props.value * props.limit - 1;

      if (props.total > 0) {
        return endIndex > props.total ? props.total : endIndex;
      }
      return endIndex;
    });
    // 分页跳转
    const doUpdatePage = (page: number) => {
      if (page === props.value) {
        return;
      }

      emit("change", page, props.limit);
    };
    // 快速前进
    const fastBackward = () => {
      if (props.disabled) {
        return;
      }

      const page = Math.max(1, props.value - (props.pageSlot - 4));
      doUpdatePage(page);
    };
    // 快速后退
    const fastForward = () => {
      if (props.disabled) {
        return;
      }

      const page = Math.min(
        props.value + (props.pageSlot - 4),
        pageCount.value
      );
      doUpdatePage(page);
    };

    const pageItems = computed<PageItem[]>(() => {
      return getPageItems(props.value, pageCount.value, props.pageSlot);
    });
    // 统一的点击事件分发   策略模式
    const handlePageItemClick = (pageItem: PageItem) => {
      if (props.disabled) {
        return;
      }
      switch (pageItem.type) {
        case "page":
          doUpdatePage(pageItem.label);
          break;
        case "fastBackward":
          fastBackward();
          break;
        case "fastForward":
          fastForward();
          break;
      }
    };

    const goPrePage = () => {
      if (comPreBtnDisabled.value) {
        return;
      }
      doUpdatePage(props.value - 1);
    };

    const goNextPage = () => {
      if (comNextBtnDisabled.value) {
        return;
      }
      doUpdatePage(props.value + 1);
    };

    return {
      comClazz,
      pageItems,
      pageCount,
      handlePageItemClick,
      comPreBtnDisabled,
      comNextBtnDisabled,
      goPrePage,
      goNextPage,
      comItemClazz,
    };
  },
});
</script>
